<!--
 * @Author: zk
 * @Date: 2021-01-22 10:51:30
 * @LastEditors: zk
 * @LastEditTime: 2021-01-22 11:02:56
 * @Description:
-->
<template>
  <div id="main-search" class="main-search">
    <el-form
      ref="commonForm"
      :rules="rules"
      border
      v-bind="$attrs"
      inline
      :model="model"
      class="test-form"
      v-on="$listeners"
    >
      <el-form-item
        v-for="item in itemList"
        :key="item.prop"
        :label="item.label"

        :prop="item.prop"
        label-width="auto"
      >
        <!-- 常用地址 -->
        <el-cascader
          v-if="item.type === 'Cascader'"
          v-model="model[item.prop]"
          :style="{ width: '100%' }"
          :options="item.options"
          :props="{ checkStrictly: true }"
          clearable
          @change="item.change"
        />
        <!-- 输入框 -->
        <el-input v-if="item.type === 'Input'" v-model="model[item.prop]" />
        <!-- 下拉框 -->
        <el-select
          v-if="item.type === 'Select'"
          v-model="model[item.prop]"
          :style="{ width: '7rem' }"
        >
          <el-option
            v-for="op in item.options"
            :key="op.value"
            :label="op.label"
            :value="op.value"
          />
        </el-select>
        <!-- 日期 -->
        <el-date-picker
          v-if="item.type === 'data'"
          v-model="model[item.prop]"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          type="date"
          :style="{ width: '100%' }"
          placeholder="选择日期"
        />
        <!-- 个人信息查询项目 -->
        <MyInformation
          v-if="item.type === 'myInformation'"
          :model="model"
          :options="item.options"
        />
        <AgeDate v-if="item.type === 'ageDate'" :model="model" />
        <!-- 是否体检 -->
        <PhysicalExamination
          v-if="item.type === 'checkType'"
          :model="model"
        />
        <DoctorQuery
          v-if="item.type === 'doctorQuery'"
          :model="model"
        />
        <!-- 时间查询选项 -->
        <TimeQuery v-if="item.type === 'TimeQuery'" :model="model" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import MyInformation from './form-item/MyInformationTest.vue'
import PhysicalExamination from './form-item/PhysicalExaminationShow.vue'
import DoctorQuery from './form-item/DoctorQuery.vue'
import AgeDate from './form-item/AgeDate.vue'
import TimeQuery from './form-item/TimeQuery.vue'
export default {
  name: 'CommonForm',
  components: { MyInformation, PhysicalExamination, TimeQuery, AgeDate, DoctorQuery },
  inheritAttrs: false,
  props: {
    model: {
      type: Object,
      default: () => {}
    },
    itemList: {
      type: Array,
      default: () => []
    },
    rules: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      span: 6
    }
  },
  computed: {},
  watch: {
    model: {
      handler(newValue) {
        // console.log(newValue)
      },
      immediate: true
    }
  },
  mounted() {},
  methods: {
    validate(fun) {
      return this.$refs.commonForm.validate(fun)
    }
  }
}
</script>

<style lang="scss" scoped>
.main-search {
  padding-top: 15px;
  /deep/ .el-form-item{
    white-space:normal;
  }
  /deep/ .el-form-item__label-wrap {
      margin-left: 0 !important;
  }

  .marginLeft {
    margin-left: 20px;
  }
}

.test-form {
  display: flex;
  flex-wrap: wrap;
}
</style>
